<template>
  <div class="index_top_bg">
    <div class="content_out index_top_menu">
      <div style="margin:0px auto">
        <TopNav :show_links="show_links"></TopNav>
      </div>
      <!-- <div class="index-input-search" v-if="nav_value < 2">
        <div class="search">
          <el-input placeholder="搜索" v-model="inputValue" class="input-with-select">
            <el-button type="primary" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexTop',
  props: {
    nav_value: {
      type: Number,
      default: 0
    },
    show_links: {
      type: Boolean,
      default: true
    }
  },
  created() {

  },
  data() {
    return {
      slide: 0,
      sliding: null,
      inputValue: "",
      nuxtNavData: [
        {
          link: "/",
          name: "首页"
        }, {
          link: "dangjian",
          name: "党建引领"
        }, {
          link: "renzi",
          name: "人资招聘"
        }, {
          link: "gongshi",
          name: "公示公告"
        }, {
          link: "xindu",
          name: "新都特色"
        }, {
          link: "zhinan",
          name: "办事指南"
        }, {
          link: "rencai",
          name: "人才培训"
        },
      ]
    }
  },
  methods: {
    onSlideStart(slide) {
      this.sliding = true
    },
    onSlideEnd(slide) {
      this.sliding = false
    }
  }
}
</script>
<style scoped lang="scss">
.index_top_bg {
  position: absolute;
  .index_top_bg_img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .index-input-search {
    position: absolute;
    width: 300px;
    height: 40px;
    right: 0;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    border: 1px solid #2F6CBC;
  }

  .index_top_menu {
    
    position: relative;
    .index_middle_menu {
      width: 100%;
      position: absolute;
      bottom: 0px;
      height: 70px;
      margin: 0px auto;
      // margin-left: -512px;
      display: flex;
      justify-content: center;

      @media (max-width: 1400px) {
        visibility: hidden;
      }

      .items {
        width: 229px;
        box-sizing: border-box;
        height: 70px;
        background: #2F6CBC;
        text-align: center;
        display: flex;
        align-items: center;
        // background: url(/img/index_top_menu_right_border.png) no-repeat right center;
        position: relative;
        border-right: 1px solid #1E5093;

        &:last-child {}

        &:hover {
          // background: #cf000d
        }

        a {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 0px;
          left: 0px;
          box-sizing: border-box;
          text-align: center;
          font-size: 1.5rem;
          font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
          font-weight: 400;
          color: #FFFFFF;
          line-height: 35px;

          &:hover {
            color: #fff;
            text-decoration: none;
          }
        }
      }

      .items_ {
        width: 229px;
        box-sizing: border-box;
        height: 70px;
        background: #2F6CBC;
        text-align: center;
        display: flex;
        align-items: center;
        // background: url(/img/index_top_menu_right_border.png) no-repeat right center;
        position: relative;
        border-right: 1px solid #1E5093;

        a {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 0px;
          left: 0px;
          box-sizing: border-box;
          text-align: center;
          font-size: 1.5rem;
          font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
          font-weight: 700;
          color: #FFFFFF;
          line-height: 35px;

          &:hover {
            color: #fff;
            text-decoration: none;
          }

        }

        &::after {
          position: absolute;
          content: "";
          left: 23px;
          bottom: 8px;
          width: 160px;
          height: 3px;
          background: #FFFFFF;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
        }
      }

    }
  }
}
</style>
